Skip to main content

Widget Integration

This page covers how your widget integrates with the Online Banking (OLB) web application in production — Module Federation configuration, registration, shared dependencies, and deployment.

Module Federation​

Every widget in the CDX Extensibility Apps repo is a Module Federation remote. This is the mechanism OLB uses to load your widget at runtime without bundling it into the host app.

module-federation.config.ts​

This is the most important file in your widget. It defines the two values OLB needs to locate and load it:

const config: ModuleFederationConfig = {
  name: 'agent-widget',
  exposes: {
    './AgentWidget': './src/app/AgentWidget',
  },
};
FieldPurpose
nameRemote name — uniquely identifies your widget to the OLB host. Must match exactly what is registered in the NextGen Admin Portal.
exposesThe component(s) your widget makes available to the host app at runtime.
warning

Do not deploy changes to these fields independently. Always align with the platform team to update the registration before or alongside your deployment. Do not modify webpack.config.ts — it wires module-federation.config.ts into the Webpack build. Any changes will break the Module Federation setup and prevent OLB from loading your widget.

remoteEntry.js​

Every nx build generates a remoteEntry.js in the output folder (dist/apps/<widget>/remoteEntry.js). This is the first file OLB fetches at runtime. It contains the widget's module manifest and shared dependency negotiation logic. OLB loads this file, resolves shared packages (React, MUI, etc.), then dynamically imports the exposed component.

Build​

Build a widget for a specific environment:

Bash
nx build agent-widget --configuration=production

Available configurations: production, stage, sandbox.

Build output is written to dist/apps/<widget-name>/.

Registering Your Widget​

When you are ready to integrate your widget with the candescent platform, Reach out to the Candescent tech support team with these three values:

ValueExample
Remote nameagent-widget
Exposed component path./AgentWidget
Build outputShare the output folder from the build step via an uploaded URL or zip file

The candescent platform host registers your widget using these three values in the NextGen Admin Portal. Until that registration is done, the widget is deployed but not visible in the platform.

Shared Dependencies​

Refer to the shared dependencies listed in the CDX Extensibility Apps README. Your widget must only use the packages and versions specified there. Module Federation shares these dependencies between the host and your widget at runtime — version mismatches may appear to work locally but will cause runtime errors on the platform. Do not add any runtime dependencies outside this list without coordinating with the platform team.

Submitting Widgets​

Widget submission through the Developer Console is planned. For now, coordinate directly with the platform team for OLB registration and deployment. See Submissions for reference on the current Aspect submission flow.

Next Steps​